<template>
	<view class="login">
		<view class="login-top bg-active bg_all">
			<view @tap="navBack" style="padding-top: 30rpx;" class="com_width">
				<u-icon color="#fff" size="48" name="arrow-left"></u-icon>
			</view>
			
			<view class="desc">
				<view class="title">Hi~</view>
				<text>{{ appName }}欢迎您</text>
			</view>
			<image class="login-pic" src="/static/imgs/login/login-pic.png"></image>
		</view>
		<view class="login-type-content">
			<image class="login-bg" src="/static/imgs/login/login-bg.png" :style="{ height: tabCurrentIndex === 1 ? '50vw' : '94vw' }"></image>
			<view class="main">
				<view class="nav-bar">
					<view
						class="nav-bar-item"
						v-for="(item, index) in typeList"
						:key="index"
						:class="tabCurrentIndex === index ? 'nav-bar-item-active text-active' : ''"
						@tap="tabClick(index)"
					>
						{{ item.text }}
					</view>
				</view>
				<block v-if="tabCurrentIndex === 0">
					<view class="login-type-form">
						<view class="input-item display_flex u-border-bottom">
							<text class="login-type-text">手机号</text>
							<input class="login-type-input" type="number" name="mobile" v-model="loginParams.mobile" placeholder="请输入手机号码" maxlength="11" />
						</view>
						<view class="input-item display_flex u-border-bottom" v-if="loginByPass">
							<text class="login-type-text">密码</text>
							<input class="login-type-input" type="password" v-model="loginParams.password" placeholder="请输入密码" maxlength="20" />
						</view>
						<view class="input-item display_flex u-border-bottom" v-if="!loginByPass">
							<text class="login-type-text">验证码</text>
							<view class="input-wrapper">
								<view class="rf-input-wrapper">
									<input type="number" class="login-type-input" v-model="loginParams.code" placeholder="请输入验证码" maxlength="4" />
								</view>
							</view>
							<view class="wrap">
								<u-toast ref="uToast"></u-toast>
								<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-verification-code>
								<u-button :custom-style="customStyle" @tap="getCode">{{ tips }}</u-button>
							</view>
						</view>
					</view>
					<view class="login-type-tips">
						<view @tap="showLoginBySmsCode" class="forget-section">{{ loginByPass ? '验证码登录' : '密码登录' }}</view>
						<text @tap="navTo('/pages/public/password')">忘记密码？</text>
					</view>
					<button class="confirm-btn bg-active bg_all" :disabled="btnLoading" :loading="btnLoading" @tap="toLogin">登录</button>
				</block>
				<block v-if="tabCurrentIndex === 1">
					<view class="display_column wx_login_box">
						<button open-type="getUserInfo" @getUserInfo="getUserInfo" class="confirm-btn bg-active bg_all">微信快捷登录</button>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			// button样式
			customStyle: {
				padding: '0 0',
				width: '210rpx'
			},
			tips: '',
			seconds: 60,
			loginParams: {
				mobile: null,
				code: '',
				password: ''
			},

			btnLoading: false,
			reqBody: {},
			loginByPass: false,
			smsCodeBtnDisabled: true,
			userInfo: null,
			appName: '登录模板',
			tabCurrentIndex: 0,
			typeList: [
				{
					text: '登录'
				},
				{
					text: '微信登录'
				}
			]
		};
	},
	onLoad(options) {
		this.tabCurrentIndex = parseInt(options.type || 0, 10);
	},
	methods: {
		getUserInfo(e) {
			console.log(e);
			// code
			uni.login({
				provider: 'weixin',
				success: res => {
					console.log(res)
				}
			});
		},

		codeChange(text) {
			this.tips = text;
		},
		getCode() {
			if (!this.loginParams.mobile) {
				uni.showToast({
					title: '请输入手机号！',
					icon: 'none'
				});
				return;
			}
			if (this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				});
				setTimeout(() => {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					this.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				}, 1000);
			} else {
				this.$u.toast('倒计时结束后再发送');
			}
		},
		end() {
			this.$u.toast('倒计时结束');
		},
		start() {
			this.$u.toast('倒计时开始');
		},
		// 切换登录方式
		showLoginBySmsCode() {
			this.loginByPass = !this.loginByPass;
		},
		// 返回上一页
		navBack() {
			uni.navigateBack();
		},
		// 提交表单
		async toLogin() {
			console.log(this.storage.comSetStorage('login',"123",this.navBack))
		},
		// 切换登录/注册
		tabClick(index) {
			this.tabCurrentIndex = index;
		}
	}
};
</script>
<style lang="scss">
.login {
	width: 100%;
	position: relative;
	.text-active,
	.iconfont {
		color: #007aff;
	}
	.wx_login_box {
		height: 240rpx;
		justify-content: center;
		.wx_icon {
			width: 100rpx;
			height: 100rpx;
		}
		.confirm-btn {
			margin-top: 0 !important;
		}
	}
	.back-btn {
		position: absolute;
		left: 40rpx;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 40rpx;
		font-size: 48rpx;
		color: #fff;
	}
	.login-top {
		height: 460rpx;
		position: relative;
		.desc {
			color: #fff !important;
			position: absolute;
			top: 200rpx;
			left: 40rpx;
			font-size: 48rpx;
			.title {
				font-size: 48rpx;
				padding-bottom: 15rpx;
			}
		}
		.login-pic {
			position: absolute;
			width: 220rpx;
			height: 270rpx;
			right: 30rpx;
			top: 100rpx;
		}
	}
	.login-type-content {
		position: relative;
		top: -72rpx;
		.login-bg {
			width: 94vw;
			height: 94vw;
			margin: 0 3vw;
		}
		.main {
			width: 94vw;
			position: absolute;
			top: 0;
			left: 3vw;
			.nav-bar {
				display: flex;
				height: 100rpx;
				justify-content: center;
				align-items: center;
				position: relative;
				z-index: 10;
				.nav-bar-item {
					flex: 1;
					display: flex;
					height: 100%;
					line-height: 96rpx;
					font-size: 32rpx;
					display: flex;
					margin: 0 100rpx;
					justify-content: center;
				}
				.nav-bar-item-active {
					border-bottom: 5rpx solid;
				}
			}
			.login-type-form {
				width: 80%;
				margin: 50rpx auto;
				.input-item {
					position: relative;
					height: 90rpx;
					line-height: 90rpx;
					margin-bottom: 30rpx;
					.iconfont {
						font-size: 50rpx;
						position: absolute;
						left: 0;
					}
					.login-type-input {
						height: 90rpx;
						font-size: 30rpx;
					}
					.login-type-text {
						height: 90rpx;
						min-width: 120rpx;
						font-size: 32rpx;
						font-weight: 400;
					}
					.sms-code-btn,
					sms-code-resend {
						width: 240rpx;
						font-size: 26rpx;
					}
				}
			}
			.login-type-tips {
				padding: 0 50rpx;
				display: flex;
				justify-content: space-between;
				font-size: 28upx;
				color: #666;
			}
			.confirm-btn {
				margin-top: 60upx;
				width: 80%;
				height: 80rpx;
				line-height: 80rpx;
			}
		}
	}
}
</style>
